<script setup lang="ts">
import { ref } from 'vue'

const handleClose = () => {
  window.windowApi.close()
}

interface ShortcutGroup {
  name: string
  shortcuts: {
    mac: Record<string, string>
    windows: Record<string, string>
  }
}

// 快捷键配置
const shortcutGroups: ShortcutGroup[] = [
  {
    name: '编辑操作',
    shortcuts: {
      mac: {
        'Command + C': '复制',
        'Command + V': '粘贴',
        'Command + X': '剪切',
        'Command + A': '全选'
      },
      windows: {
        'Ctrl + C': '复制',
        'Ctrl + V': '粘贴',
        'Ctrl + X': '剪切',
        'Ctrl + A': '全选'
      }
    }
  },
  {
    name: '撤销重做',
    shortcuts: {
      mac: {
        'Command + Z': '撤销',
        'Command + Shift + Z': '重做'
      },
      windows: {
        'Ctrl + Z': '撤销',
        'Ctrl + Y': '重做'
      }
    }
  },
  {
    name: '开发工具',
    shortcuts: {
      mac: {
        'Command + Option + I': '开发者工具',
        'Command + Option + J': '开发者控制台',
        'Command + Option + U': '查看源代码'
      },
      windows: {
        'Ctrl + Shift + I': '开发者工具',
        'Ctrl + Shift + J': '开发者控制台',
        'Ctrl + Shift + U': '查看源代码',
        'F12': '开发者工具'
      }
    }
  },
  {
    name: '页面刷新',
    shortcuts: {
      mac: {
        'Command + R': '刷新页面',
        'Command + Shift + R': '强制刷新页面'
      },
      windows: {
        'Ctrl + R': '刷新页面',
        'Ctrl + Shift + R': '强制刷新页面',
        'F5': '刷新页面'
      }
    }
  }
]

const platform = ref(window.platform.isMac ? 'mac' : 'windows')
</script>

<template>
  <div class="container">
    <h2>快捷键</h2>
    
    <div class="shortcut-list">
      <div v-for="group in shortcutGroups" :key="group.name" class="shortcut-group">
        <h3>{{ group.name }}</h3>
        <el-table :data="Object.entries(group.shortcuts[platform])" border>
          <el-table-column label="快捷键" prop="0" min-width="150" />
          <el-table-column label="功能" prop="1" min-width="120" />
        </el-table>
      </div>
    </div>

    <div class="divider"></div>
    <div class="button-group">
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 16px;
  position: relative;
  height: 100vh;
  overflow-y: auto;
}

.shortcut-list {
  margin-top: 20px;
  padding-bottom: 80px;
}

.shortcut-group {
  margin-bottom: 24px;

  h3 {
    margin-bottom: 12px;
    color: var(--el-text-color-primary);
    font-size: 16px;
  }
}

.divider {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--el-border-color);
  margin: 0 10px;
}

.button-group {
  position: fixed;
  bottom: 25px;
  right: 10px;
  display: flex;
  background: var(--el-bg-color);
  padding: 0 10px;
}
</style>
